<template>
  <div>
      <div class="listys_icon_arrow"
      @click="onClickLeftArrow">
          <van-icon name="arrow-left" />
      </div>
      <div>
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <div v-for="(item,index) in listys.pics2" :key="index">
                <van-swipe-item>
                    <img :src="item" alt="">
                </van-swipe-item>
            </div>
          </van-swipe>
      </div>
      <div class="listys_price_container">
          <div class="listys_name">{{this.listys.basicInfo.name}}</div>
          <div class="listys_characteristic">{{this.listys.basicInfo.characteristic}}</div>
          <div class="listys_list">
              <div class="listys_price">
                  <div style="color:red;font-size:14px">{{this.listys.basicInfo.minPrice | MinPrice}}</div>
                  <div>{{this.listys.basicInfo.originalPrice | originalPrice}}</div>
              </div>
              <div>库存{{this.listys.basicInfo.stores}}</div>
          </div>
      </div>
      <div class="kong"></div>
      <van-tabs v-model="listysA">
        <van-tab title="商品内容">
            <div id="renqi" v-html="this.listys.content"></div>
        </van-tab>
        <van-tab title="商品评价">
            <div v-for="(item,index) in goods" :key="index"
            class="listys_goods">
                <div class="vant_Icon">
                    <i class="van-icon van-icon-user-circle-o"></i>
                </div>
                <div class="listys_user_container">
                <div class="listys_nick">
                    <div style="font-size:0.6rem">{{item.user.nick}}</div>
                    <div class="listys_goodReputationStr">{{item.goods.goodReputationStr}}</div>
                </div>
                <div style="font-size:0.8rem;width:100%">{{item.goods.goodReputationRemark}}</div>
                <div class="listys_goods_date">
                    <div style="font-size:0.3rem">{{item.goods.dateReputation}}</div>
                    <div style="font-size:0.3rem">{{item.goods.goodsName | goodsName}}</div>
                </div>
                </div>
            </div>
        </van-tab>
      </van-tabs>

      <div class="listys_goodsAction">
          <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" dot />
            <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
            <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
            <van-goods-action-button type="warning" @click="onClickWarning" text="加入购物车" />
            <van-goods-action-button type="danger" text="立即购买" />
            </van-goods-action>
      </div>
          <van-popup v-model="show" position="bottom">
          <div class="bottomMall_bottom">
              <!-- {{MallList}} -->
                <div class="bottomMall_wrapper">
                    <div class="bottomMall_wrapper_img">
                        <img :src="this.list.pic"/>
                    </div>
                    <div class="bottomMall_wrapper_title">
                        <div style="width:100%">{{this.list.name}}</div>
                        <div>￥{{this.list.minPrice}}</div>
                    </div>
                </div>
                <div class="mmmmmm">
                    <div v-for="(item,index) in properties"
                    :key="index"
                    style="width:100%"
                    class="bottomMall_container_title_price">
                    <div style="width:100%">{{item.name}}</div>
                            <div v-for="(item,index) in item.childsCurGoods"
                    :key="index"
                    class="bottomMall_wrapper_wrapper_title">
                        <div class="bottomMall_wrapper_wrapper_title_wrapper"
                        @click="onClickNameChi(item)">
                            {{item.name}}
                        </div>
                    </div>
                    </div>
                </div>
          </div>
          <div>
              <div class="mai_shuliang">
                  <div>购买数量</div>
                  <div>
                      <van-stepper v-model="value" />
                  </div>
              </div>
              <van-button color="rgb(252, 210, 73)" style="width:100%"
              @click="onClickLoginPup">加入购物车</van-button>
          </div>
      </van-popup>
  </div>
</template>

<script>
import axios from "axios";
export default {
    data(){
        return{
            listys:[],
            listysA:0,
            goods:[],
            show: false,
            list:[],
            properties:[],
            value:1,
            itemId:0
        }
    },
    mounted(){
        // console.log(JSON.parse(localStorage.getItem("listys")));
        // console.log(this.listys);
        console.log(this.$route.query.id);
        axios.get('https://api.it120.cc/small4/shop/goods/detail',{
            params:{
                id:this.$route.query.id
            }
        }).then(res=>{
            // console.log(res);
            this.listys = res.data.data;
            this.list = res.data.data.basicInfo;
            this.properties = res.data.data.properties;
            console.log(this.properties);
            // console.log(this.listys);
        })
        axios.get("https://api.it120.cc/small4/shop/goods/reputation",{
            params:{
                goodsId:this.$route.query.id
            }
        }).then(res=>{
            console.log(res);
            this.goods = res.data.data;
            // console.log(this.goods.goods);
        })
    },
    filters:{
        MinPrice:function(val){
            return "低价￥" + val
        },
        originalPrice:function(val){
            return "原价￥" + val
        },
        goodsName(val){
            return "选择规格:" + val
        }
    },
    methods:{
        onClickLeftArrow(){
            this.$router.go(-1)
        },
        onClickWarning(){           
            this.show = true;
        },
        onClickNameChi(item){
            console.log(item);
            this.itemId = item.id
        },
        onClickLoginPup(){
            this.$store.commit("ADD",this.list)
            this.$router.push("/mall")
        },

    }
}
</script>

<style>
.listys_icon_arrow
{
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid white;
    border-radius: 2rem;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 999;
    /* padding: 0.2rem; */
    margin: 0.2rem;
    
}
.listys_goods_date
{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.listys_user_container
{
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.listys_goodReputationStr
{
    width: 15%;
    /* height: 1.2rem; */
    height: 100%;
    background: red;
    font-size: 0.6rem;
    color: white;
    margin-left: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.listys_nick
{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.listys_goods
{
    width: 100%;
    height: 5rem;
    /* border: 1px solid black; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.vant_Icon
{
    width: 20%;
    height: 100%;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
  /* .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  } */
  .van-swipe-item
  {
      width: 100%;
      height: 400px;
  }
  .van-swipe-item img
  {
     width: 100%; 
     height: 100%;
  }
  .listys_name
  {
      width: 90%;
      font-size: 18px;
      height: 35%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
  }
  .listys_characteristic
  {
      width: 90%;
      font-size: 16px;
      height: 30%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
  }
  .listys_list
  {
      width: 90%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      height: 30%;
  }
  .listys_price_container
  {
      width: 100%;
      height:5rem;
      /* border: 1px solid black; */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
  }
  .listys_price
  {
      width: 40%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;   
  }
 .kong 
 {
      width: 100%;
      height: 1rem;
      background: rgba(129, 119, 119, 0.2);
 }
#renqi ul li:nth-of-type(1) {
    margin-top: 0.1rem;
}
#renqi>div:nth-of-type(4) ul li p span {
    font-size: 5rem;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
#renqi>div:nth-of-type(4) ul li p span {
    font-size: 0.2rem;
}
.img-lazyloaded {
    width: 100% !important;
    height: 5rem !important;
}
#renqi ul li {
    height: 2rem;
    line-height: 1.27rem;
    padding-left: 0.14rem;
    padding-right: 0.24rem;
    font-size: 0.8rem;
}
.mmmmmm
{
    width: 100%;
    border: 1px solid rgb(219, 219, 219);
}
.bottomMall
{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
}
.van-goods-action
{
    width: 100%;
}
.bottomMall_bottom
{
    width: 100%;
}
.bottomMall_wrapper
{
    width:100%;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgb(214, 213, 213);
}
.bottomMall_wrapper_img
{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottomMall_wrapper_img img
{
    width: 80%;

}
.bottomMall_wrapper_title
{
    width: 70%;
    height: 80%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
.bottomMall_wrapper_wrapper_title
{
    /* width: 100%; */
    width: 29%;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 0.5rem;
}
.bottomMall_wrapper_wrapper_title_wrapper
{
    width: 100%;
    height:2rem;
    border: 1px solid black;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
}
.bottomMall_wrapper_wrapper_title_wrapper:hover
{
    border: 1px solid red;
    color: red;
}
.bottomMall_container_title_price
{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.mai_shuliang
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.img-lazyload {
    width: 2rem;
}
</style>